<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>地图初始化</title>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=iBZR31g3G73oIla9SkX7OIOiUrB1ynmT"></script>
    <style>
      body,
      html,
      #allmap {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }
      ul,
      li {
        list-style: none;
      }
      .btn-wrap {
        z-index: 999;
        width: 226px;
        position: fixed;
        bottom: 30px;
        left: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: rgba(265, 265, 265, 0.9);
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      }
      .btn {
        width: 100px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px 6px;
        text-align: center;
        line-height: 30px;
      }
      .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="allmap"></div>
    <ul class="btn-wrap" style="z-index: 99;">
      <li class="btn" onclick="showText()">显示POI文字</li>
      <li class="btn" onclick="hideText()">隐藏POI文字</li>
      <li class="btn" onclick="showIcon()">显示POI的Icon</li>
      <li class="btn" onclick="hideIcon()">隐藏POI的Icon</li>
    </ul>
    <script>
      let map = null;
      initMap();

      /**地图初始化**/
      function initMap() {
        map = new window.BMapGL.Map("allmap"); //创建地图
        map.enableDragging(); //启用拖拽功能
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.centerAndZoom(new BMapGL.Point(117.217157, 39.24503), 15);
        map.setDisplayOptions({
          skyColors: ["rgba(186, 0, 255, 0)", "rgba(186, 0, 255, 0.2)"]
        }); //设置天空颜色
        map.setHeading(64.5); // 设置地图旋转角度
        map.setTilt(73); // 设置地图的倾斜角度
        let scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        let zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        let navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
        map.addControl(navi3DCtrl);
        // 创建城市选择控件
        let cityControl = new BMapGL.CityListControl({
          // 控件的停靠位置（可选，默认左上角）
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          // 控件基于停靠位置的偏移量（可选）
          offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);
        map.setDisplayOptions({
          poi: true //是否显示POI信息
        });
      }
      /**显示文字**/
      function showText() {
        map.setDisplayOptions({
          poiText: true
        });
      }
      /**隐藏文字**/
      function hideText() {
        map.setDisplayOptions({
          poiText: false
        });
      }
      /**显示POI图标**/
      function showIcon() {
        map.setDisplayOptions({
          poiIcon: true
        });
      }
      /**隐藏POI图标**/
      function hideIcon() {
        map.setDisplayOptions({
          poiIcon: false
        });
      }
    </script>
  </body>
</html>
